<template>
  <div>
    <router-link to="/addUser">
      <el-button
        type="primary"
        style="margin-top: 20px; margin-left: 20px; margin-bottom: 20px"
        >添加用户</el-button
      >
    </router-link>
    <el-table :data="data" border style="width: 100%">
      <el-table-column fixed prop="loginName" label="登录名称" width="150">
      </el-table-column>
      <el-table-column prop="userName" label="用户名称" width="120">
      </el-table-column>
      <el-table-column prop="userType" label="用户类型" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.userType === '00'">系统用户</div>
          <div v-else>注册用户</div>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="用户邮箱" width="120">
      </el-table-column>
      <el-table-column prop="phonenumber" label="手机号码" width="120">
      </el-table-column>
      <el-table-column prop="sex" label="用户性别" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.sex === '0'">女</div>
          <div v-else>男</div>
        </template>
      </el-table-column>
      <el-table-column prop="avatar" label="用户头像" width="100">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="帐号状态" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.status === '0'">正常</div>
          <div v-else>冻结</div>
        </template>
      </el-table-column>
      <el-table-column prop="delFlag" label="删除标志" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.status === '0'">正常</div>
          <div v-else>注销</div>
        </template>
      </el-table-column>
      <el-table-column prop="loginIp" label="登录IP" width="120">
      </el-table-column>
      <el-table-column prop="loginDate" label="登录时间" width="160">
        <template slot-scope="scope">
          {{ scope.row.loginDate.replace('T', ' ') }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            disabled
            @click="handleClick(scope.row)"
            type="primary"
            size="small"
            >查看</el-button
          >
          <el-button
            @click="handleClickEdit(scope.row)"
            type="warning"
            size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出修改框 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="帐号状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="账户状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="封禁" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit(form)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 弹出查看框 -->
    <!-- <el-dialog title="查看" :visible.sync="dialogClick">
      <el-form :model="form">
        <el-form-item label="帐号状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="账户状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="封禁" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit(form)">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { getList, ban } from '@/api/user';
export default {
  methods: {
    handleClick(row) {
      this.dialogClick = true;
    },
    handleClickEdit(row) {
      this.dialogFormVisible = true;
      this.form.name = row.loginName;
      this.form.status = row.status;
    },
    // 修改用户状态
    edit(form) {
      console.log(form.name);
      ban(form).then((resp) => {
        this.dialogFormVisible = false;
        // 获取整个公司人员
        this.getUserList();
        console.log(resp);
        this.$notify({
          title: '成功',
          message: resp.data,
          type: 'success',
        });
      });
    },
    getUserList() {
      getList().then((response) => {
        this.data = response.data;
      });
    },
  },
  // 第二个生命周期函数 在实例生成之后会自动执行的函数
  created() {
    // 获取整个公司人员
    this.getUserList();
  },
  data() {
    return {
      data: [],
      dialogFormVisible: false,
      dialogClick: false,
      form: {
        name: '',
        status: '0',
        delFlag: '0',
      },
    };
  },
};
</script>
